<template>
  <el-container>
    <el-aside class="bg-white" width="420px">
      <!--左侧搜索条件-->
      <div ref="asideTop" class="material-filter-container" @click="searchStuats()">
        <el-tabs v-model="searchStuat" :stretch="true" type="border-card">
          <el-tab-pane name="待提交" label="待提交"/>
          <el-tab-pane name="待审核" label="待审核"/>
          <el-tab-pane name="采购中" label="采购中"/>
          <el-tab-pane name="已完成" label="已完成"/>
          <el-tab-pane name="已驳回" label="已驳回"/>
          <el-tab-pane name="已取消" label="已取消"/>
          <el-tab-pane name="全部" label="全部"/>
        </el-tabs>
      </div>
      <div ref="asideBottom" class="container-ymm container_tabs">
        <el-row :gutter="10">
          <div class="time_div">
            <el-date-picker
              v-model="dateTime"
              :picker-options="pickerOptions"
              type="datetimerange"

              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"/>
          </div>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="19">
            <el-input v-model="search.keyword" class="s-input" placeholder="输入供应商、单号、sku查询" prefix-icon="el-icon-search"/>
          </el-col>
          <el-col :span="5">
            <el-button type="primary" @click="getlist()">查询</el-button>
          </el-col>
        </el-row>
        <el-row class="mt-10">
          <div ref="list" class="list">
            <div
              v-for="(item,index) in tablePurchaseData"
              :key="index"
              :style="item.Mystyle"
              class="item"
              @click="currentChange(item)">
              <p class="name">{{ item.supplier }}</p>
              <el-row type="flex" justify="space-between">
                <span class="price">￥{{ item.totalPrice }}</span><span class="date">{{ item.createTime |parseTime('{y}-{m}-{d}') }}</span>
              </el-row>
            </div>
          </div>
          <div ref="pagination" class="mt-15 mb-20 text-center">
            <el-pagination
              :current-page="search.page"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="search.pageSize"
              :pager-count="5"
              :total="search.total"
              background
              layout="prev, pager, next, total, sizes, jumper"
              @current-change="handleCurrentChange"/>
          </div>

        </el-row>
      </div>
    </el-aside>
    <el-main>
      <div class="container-ymm" style="margin-left:15px;">
        <div class="pl-30 pr-30">
          <el-row :gutter="10" style="text-align:right" class="pt-15 pb-15">
            <el-col :span="6"/>
            <el-button v-show="checkPermission('purchase:send:authority')" type="primary" @click="sendFun">提交</el-button>
            <el-button v-show="checkPermission('purchase:approve:authority')" type="primary" @click="approveFun">审批</el-button>
            <el-button v-show="checkPermission('purchase:edit:authority')" type="primary" @click="editFun">编辑</el-button>
            <el-button v-show="checkPermission('purchase:delet:authority')" type="primary" @click="deletFun()">删除</el-button>
            <el-button v-show="checkPermission('purchase:addpurchase:authority')" type="primary" @click="purchaseFun">申请采购</el-button>
            <el-button v-show="checkPermission('purchase:over:authority')" type="primary" @click="over">完成</el-button>
            <el-button v-show="checkPermission('purchase:print:authority')" type="primary" @click="printdj">打印</el-button>
            <el-button type="primary" @click="historyFun">履历查询</el-button>
          </el-row>
          <el-row :gutter="20" style="margin-bottom: 15px;border: 1px dashed #eee"/>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label">订单号:</div>
                </el-col>
                <el-col :span="17">
                  <div
                    class="shipment_div">{{ purchaseData.purchaseNumber }}</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label">状态:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">
                    <span v-if="purchaseData.status==='B20'">待提交</span>
                    <span v-if="purchaseData.status==='B40'">待审批</span>
                    <span v-if="purchaseData.status==='B50'">采购中</span>
                    <span v-if="purchaseData.status==='D20'">已驳回</span>
                    <span v-if="purchaseData.status==='D10'">已完成</span>
                  <span v-if="purchaseData.status==='E10'">已取消</span></div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label">创建时间:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ purchaseData.createTime |parseTime }}</div>
                </el-col>
              </el-row>
            </el-col>

            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="采购总额">采购总额:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ purchaseData.totalPrice }}</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="供应商">供应商:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div"> {{ purchaseData.supplier }}</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="发货方式">发货方式:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">
                    <span v-if="purchaseData.delivery===1">供应商代发</span>
                    <span v-if="purchaseData.delivery===2">仓库自发</span>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6">
              <el-row v-show="!checkPermission('purchase:invoice:authority')" :gutter="1">
                <el-col :span="6">
                  <div class="shipment_label" name="发票金额">发票金额:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div">{{ purchaseData.invoiceMoney }}</div>
                </el-col>
              </el-row>
              <el-row v-show="checkPermission('purchase:invoice:authority')" :gutter="1" style="color:#28A087">
                <el-col :span="6">
                  <div class="shipment_label" name="发票金额" @click="openInvoice()">发票金额:</div>
                </el-col>
                <el-col :span="17">
                  <div class="shipment_div" @click="openInvoice()">{{ purchaseData.invoiceMoney }}</div>
                </el-col>
              </el-row>

            </el-col>
          </el-row>
        </div>

        <div>
          <div class="table-ymm">
            <el-table :data="tableData" style="width: 100%" border>
              <el-table-column label="用户">
                <template slot-scope="scope">
                  <span>{{ scope.row.warehouseName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="分类">
                <template slot-scope="scope">
                  <span v-if="scope.row.classification==='1'">整机</span>
                  <span v-else-if="scope.row.classification==='2'">工具</span>
                  <span v-if="scope.row.classification==='3'">辅材</span>
                  <span v-else-if="scope.row.classification==='4'">赠品</span>
                </template>
              </el-table-column>
              <el-table-column label="SKU编码">
                <template slot-scope="scope">
                  <span>{{ scope.row.skuCode }}</span>
                </template>
              </el-table-column>
              <el-table-column label="SKU名称">
                <template slot-scope="scope">
                  <span>{{ scope.row.skuName }}</span>
                </template>
              </el-table-column>
              <el-table-column label="采购状态">
                <template slot-scope="scope">
                  <span v-if="scope.row.status===1" style="color:#28A087">待采购</span>
                  <span v-else-if="scope.row.status===2" style="color:#F05050">采购中</span>
                  <span v-else-if="scope.row.status===3" style="color:#F05050">已完成</span>
                  <span v-else-if="scope.row.status===4" style="color:#F05050">已驳回</span>
                  <span v-else-if="scope.row.status===5" style="color:#F05050">已取消</span>
                </template>
              </el-table-column>
              <el-table-column label="采购数量">
                <template slot-scope="scope">
                  <span>{{ scope.row.amount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="采购单价">
                <template slot-scope="scope">
                  <span>{{ scope.row.price }}</span>
                </template>
              </el-table-column>
              <el-table-column label="小计金额">
                <template slot-scope="scope">
                  <span >{{ scope.row.price * scope.row.amount }}</span>
                </template>
              </el-table-column>
              <el-table-column label="库存成本单价">
                <template slot-scope="scope">
                  <span>{{ scope.row.unitPrice }}</span>
                </template>
              </el-table-column>
              <el-table-column label="30天内销量">
                <template slot-scope="scope">
                  <span>{{ scope.row.sales }}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <component :is="modal" :modal-data="modalData" :modal-static-data="{closeChildAndRefresh}" @close="closeChild"/>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Approve from './dialog/Approve.vue'
import Send from './dialog/Send.vue'
import Edit from './dialog/Edit.vue'
import Purchase from './dialog/Purchase.vue'
import History from './dialog/History.vue'
import Invoice from './dialog/Invoice.vue'
import { initModuleHeight } from '@/api/utils'
import { getUserInfo } from '@/api/login'
import { getLodop } from '@/utils/LodopFuncs'
import { fetchList, queryByPurchaseId, purchaseDelete, purchaseOver } from '@/api/pas/purchase'
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      dateTime: ['', ''],
      modal: null,
      modalData: {},
      tablePurchaseData: [],
      purchaseData: {},
      purchaseId: '',

      shipmentObj: {},
      tableData: [],
      search: {
        state: 'B20',
        keyword: '',
        starTime: '',
        endTime: '',
        pageNumber: 0,
        page: 1,
        pageSize: 10,
        total: 0
      },
      searchStuat: '待提交',
      userid: null,
      imgUrl: require('../../assets/images/bsh.jpg'),
      module: {
        asideTop: {
          size: 0.1,
          height: 0
        },
        asideBottom: {
          size: 0.9,
          height: 0,
          child: {
            list: {
              size: 0.6,
              height: 0
            },
            pagination: {
              size: 0.2,
              height: 0
            }
          }
        }
      },
      tableHeight: 0
    }
  },
  watch: {
    clientHeight: function() {
      this.module = initModuleHeight(this.clientHeight, this.module)
      this.resizePageHeight(this.module)
    }
  },
  created() {
    this.getPermission()
    this.getlist()
  },
  mounted() {
    const that = this
    that.clientHeight = `${document.documentElement.clientHeight}`
    window.onresize = () => {
      return (() => {
        that.clientHeight = `${document.documentElement.clientHeight}`
      })()
    }
  },
  methods: {
    // 重置页面高度
    resizePageHeight(module) {
      const self = this
      const asideTop = self.$refs.asideTop
      const asideBottom = self.$refs.asideBottom
      const list = self.$refs.list
      const pagination = self.$refs.pagination

      asideTop.style.height = module.asideTop.height + 'px'
      asideBottom.style.height = module.asideBottom.height + 'px'
      list.style.height = module.asideBottom.child.list.height + 'px'
      pagination.tableHeight = module.pageCenter.child.list.height + 'px'
    },
    closeChildAndRefresh() {
      this.modal = null
      this.search.page = 1
      this.getlist()
    },
    closeChild() {
      this.modal = null
    },
    // 状态搜索
    searchStuats() {
      if (this.searchStuat === '待提交') {
        this.search.state = 'B20'
      } else if (this.searchStuat === '待审核') {
        this.search.state = 'B40'
      } else if (this.searchStuat === '采购中') {
        this.search.state = 'B50'
      } else if (this.searchStuat === '已完成') {
        this.search.state = 'D10'
      } else if (this.searchStuat === '已驳回') {
        this.search.state = 'D20'
      } else if (this.searchStuat === '全部') {
        this.search.state = ''
      } else if (this.searchStuat === '已取消') {
        this.search.state = 'E10'
      }
      this.getlist()
    },
    handleCurrentChange(val) {
      this.search.page = val
      this.getlist()
    },
    getlist() {
      var vmthis = this
      if (this.dateTime !== null && this.dateTime[0] !== '' && this.dateTime[0] !== null) {
        this.search.starTime = this.dateTimeStr(this.dateTime[0])
        this.search.endTime = this.dateTimeStr(this.dateTime[1])
      } else {
        this.search.starTime = ''
        this.search.endTime = ''
      }
      // 分页条件
      this.search.pageNumber = (this.search.page - 1) * this.search.pageSize
      fetchList(this.search)
        .then(response => {
          if (response.data.status === 'success') {
            vmthis.tablePurchaseData = response.data.data.list
            this.search.total = response.data.data.total
          }
          // 加载第一条数据
          if (vmthis.tablePurchaseData !== null && vmthis.tablePurchaseData.length !== 0) {
            this.purchaseData = vmthis.tablePurchaseData[0]
            this.currentChange(this.purchaseData)
            this.table.total = vmthis.tablePurchaseData.length
          } else {
            this.purchaseData = ''
            this.tableData = ''
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    currentChange(item) {
      this.purchaseData = item
      this.getPurchaseRecord(item)
      // 选择记录
      for (var i = 0; i < this.tablePurchaseData.length; i++) {
        if (this.tablePurchaseData[i].Mystyle) {
          this.tablePurchaseData[i].Mystyle = null
        }
      }
      item.Mystyle = 'background-color: #c7c0c0'
    },
    dateTimeStr(datetime) {
      var now = datetime
      var yy = now.getFullYear() // 年
      var mm = now.getMonth() + 1 // 月
      var dd = now.getDate() // 日
      var hh = now.getHours() // 时
      var ii = now.getMinutes() // 分
      var ss = now.getSeconds() // 秒
      var clock = yy + '-'
      if (mm < 10) clock += '0'
      clock += mm + '-'
      if (dd < 10) clock += '0'
      clock += dd + ' '
      if (hh < 10) clock += '0'
      clock += hh + ':'
      if (ii < 10) clock += '0'
      clock += ii + ':'
      if (ss < 10) clock += '0'
      clock += ss
      return clock
    },
    // 采购明细
    getPurchaseRecord(item) {
      queryByPurchaseId(item.purchaseId)
        .then(response => {
          if (response.data.status === 'success') {
            this.tableData = response.data.data.list
            this.purchaseData.userName = this.tableData[0].userName
            this.purchaseData.phone = this.tableData[0].phone
            this.purchaseData.address = this.tableData[0].address
          }
        })
    },
    // 审批
    approveFun() {
      if (this.purchaseData.status !== 'B40') {
        this.$message('该单不是待审批状态！')
        return
      }
      this.modalData = this.tableData
      this.modal = Approve
    },
    editFun() {
      if (this.purchaseData.source !== '2') { // 1、商城  2、自建
        this.$message('不是自建单不支持编辑！')
        return
      }
      if (this.purchaseData.status === 'B20' || this.purchaseData.status === 'D20') {
        for (let index = 0; index < this.tableData.length; index++) {
          this.tableData[index].supplierId = this.purchaseData.supplierId
          this.tableData[index].supplier = this.purchaseData.supplier
        }
        this.modalData = this.tableData
        this.modal = Edit
      } else {
        this.$message('该单状态不支持编辑！')
        return
      }
    },
    purchaseFun() {
      this.modalData = { type: '111' }
      this.modal = Purchase
    },
    openInvoice() {
      this.modalData = this.purchaseData
      this.modal = Invoice
    },
    // 提交
    sendFun() {
      if (this.purchaseData.status === 'B20' || this.purchaseData.status === 'D20') {
        this.modalData = this.tableData
        this.modal = Send
      } else {
        this.$message('该单不是待提交或驳回状态！')
        return
      }
    },
    historyFun() {
      this.modalData = { purchaseId: this.purchaseData.purchaseId }
      this.modal = History
    },
    over() {
      if (this.purchaseData.status !== 'B50') {
        this.$message('采购中状态才支持完成操作！')
        return
      }
      this.$confirm('执行完成操作, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        purchaseOver(this.purchaseData.purchaseId)
          .then(response => {
            if (response.data.status === 'success') {
              this.$message({
                type: 'success',
                message: '采购单已完成!'
              })
            }
          })
        this.getlist()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已撤销操作'
        })
      })
    },
    deletFun() {
      if (this.purchaseData.status === 'D10' || this.purchaseData.status === 'E10') {
        this.$message('该状态下不支持删除！')
        return
      }
      this.$confirm('此操作将删除该单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delet()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    delet() {
      purchaseDelete(this.purchaseData.purchaseId)
        .then(response => {
          if (response.data.status === 'success') {
            this.$message({
              message: response.data.messge
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 权限
    getPermission() {
      var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=') // 再次切割
        // 判断查找相对应的值
        if (arr2[0] === 'token') {
          this.userid = arr2[1]
        } else {
          this.userid = 1
        }
      }
      if (localStorage.getItem(this.userid)) {
        return
      }

      getUserInfo().then(response => {
        if (response.data.status === 'ok') {
          localStorage.setItem(this.userid, JSON.stringify(response.data.data.permissions))
        }
      }).catch(error => {
        console.log(error)
      })
    },

    checkPermission(value) {
      if (value) {
        if (localStorage.getItem(this.userid) &&
          localStorage.getItem(this.userid).indexOf(value) >= 0) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },
    // 打印
    printdj() {
      const LODOP = getLodop()
      LODOP.PRINT_INIT('单据打印')
      LODOP.SET_PRINT_PAGESIZE(1, 2300, 3350, '采购订单表')// 设置整页纸大小
      LODOP.SET_PRINT_MODE('PROGRAM_CONTENT_BYVAR', true)

      LODOP.ADD_PRINT_TEXT(30, 211, 416, 39, '采购订单表')
      LODOP.SET_PRINT_STYLEA(0, 'Horient', 1)
      LODOP.SET_PRINT_STYLEA(0, 'FontName', '宋体')
      LODOP.SET_PRINT_STYLEA(0, 'FontSize', 15)
      LODOP.SET_PRINT_STYLEA(0, 'Alignment', 2)
      LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
      // bsh图片
      // LODOP.ADD_PRINT_IMAGE(56,30,350,100,"<img src='../../assets/images/bsh.jpg'/>");
      LODOP.ADD_PRINT_IMAGE(30, 30, 150, 100, '<img src=' + this.imgUrl + '/>')
      LODOP.SET_SHOW_MODE('BKIMG_IN_PREVIEW', 1) // 预览包含背景图
      LODOP.SET_SHOW_MODE('BKIMG_PRINT', 1)// 打印包含背景图

      LODOP.ADD_PRINT_TEXTA('bshTelephone', 76, 27, 200, 20, '采购单号: ' + this.purchaseData.purchaseNumber)
      LODOP.ADD_PRINT_TEXTA('bshContacts', 76, 450, 178, 20, '收货人: ' + this.purchaseData.userName)
      var d = new Date(this.purchaseData.createTime) // 根据时间戳生成的时间对象
      var date = (d.getFullYear()) + '-' +
                (d.getMonth() + 1) + '-' +
                (d.getDate()) + ' ' +
                (d.getHours()) + ':' +
                (d.getMinutes()) + ':' +
                (d.getSeconds())
      LODOP.ADD_PRINT_TEXTA('disName', 106, 27, 305, 50, '采购时间： ' + date)
      LODOP.ADD_PRINT_TEXTA('disContactPhone', 106, 450, 178, 20, '电话: ' + this.purchaseData.phone)
      LODOP.ADD_PRINT_TEXTA('disContactPhone', 136, 27, 678, 20, '交货地址: ' + this.purchaseData.address)
      LODOP.ADD_PRINT_TEXTA('disContactPhone', 166, 27, 178, 20, '一、订单明细: ' + '')

      LODOP.ADD_PRINT_LINE(185, 25, 185, 744, 0, 1)
      LODOP.ADD_PRINT_LINE(205, 25, 205, 744, 0, 1)

      LODOP.ADD_PRINT_TEXT(190, 27, 67, 20, '序号')
      LODOP.SET_PRINT_STYLEA(0, 'FontName', '宋体')
      LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
      LODOP.ADD_PRINT_TEXT(190, 100, 87, 20, 'SKU')
      LODOP.SET_PRINT_STYLEA(0, 'FontName', '宋体')
      LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
      LODOP.ADD_PRINT_TEXT(190, 256, 85, 20, 'SKU名称')
      LODOP.SET_PRINT_STYLEA(0, 'FontName', '宋体')
      LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
      LODOP.ADD_PRINT_TEXT(190, 525, 60, 25, '数量')
      LODOP.SET_PRINT_STYLEA(0, 'FontName', '宋体')
      LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
      LODOP.ADD_PRINT_TEXT(190, 590, 60, 20, '单价')
      LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)
      LODOP.ADD_PRINT_TEXT(190, 680, 60, 25, '总价')
      LODOP.SET_PRINT_STYLEA(0, 'FontName', '宋体')
      LODOP.SET_PRINT_STYLEA(0, 'Bold', 1)

      /* 列表Value */
      var lineTop = 309
      for (var i = 0; i < this.tableData.length; i++) {
        var accessoryTop = (20 * i) + 210
        LODOP.ADD_PRINT_TEXT(accessoryTop, 35, 67, 20, i + 1)
        LODOP.ADD_PRINT_TEXTA('skuCode', accessoryTop, 62, 200, 20, this.tableData[i].skuCode)
        LODOP.ADD_PRINT_TEXTA('skuName', accessoryTop, 170, 400, 20, this.tableData[i].skuName)
        LODOP.ADD_PRINT_TEXTA('amount', accessoryTop, 535, 52, 20, this.tableData[i].amount)
        LODOP.ADD_PRINT_TEXTA('price', accessoryTop, 585, 49, 20, this.tableData[i].price)
        var totalPrices = this.tableData[i].amount * this.tableData[i].price
        LODOP.ADD_PRINT_TEXTA('totalPrice', accessoryTop, 660, 90, 80, totalPrices.toFixed(2))
        // line
        lineTop = (20 * i) + 223
        LODOP.ADD_PRINT_LINE(lineTop - 37, 25, lineTop, 25, 0, 1)
        LODOP.ADD_PRINT_LINE(lineTop - 37, 55, lineTop, 55, 0, 1); ``
        LODOP.ADD_PRINT_LINE(lineTop - 37, 170, lineTop, 170, 0, 1)
        LODOP.ADD_PRINT_LINE(lineTop - 37, 510, lineTop, 510, 0, 1)
        LODOP.ADD_PRINT_LINE(lineTop - 37, 570, lineTop, 570, 0, 1)

        LODOP.ADD_PRINT_LINE(lineTop - 37, 651, lineTop, 651, 0, 1)
        LODOP.ADD_PRINT_LINE(lineTop - 37, 744, lineTop, 744, 0, 1)
        LODOP.ADD_PRINT_LINE(lineTop, 25, lineTop, 744, 0, 1)
      }

      LODOP.ADD_PRINT_LINE(lineTop + 22, 25, lineTop + 22, 744, 0, 1)

      LODOP.ADD_PRINT_LINE(lineTop + 22, 25, lineTop, 25, 0, 1)
      LODOP.ADD_PRINT_LINE(lineTop + 22, 744, lineTop, 744, 0, 1)
      LODOP.ADD_PRINT_TEXT(lineTop + 5, 32, 300, 20, '合计金额：' + '￥' + this.purchaseData.totalPrice)
      LODOP.ADD_PRINT_TEXT(lineTop + 5, 221, 300, 20, '大写：' + this.purchaseData.totalPriceBig)
      LODOP.ADD_PRINT_TEXT(lineTop + 25, 27, 600, 20, '二、合同经双方同意签订必须共同遵守，认真严格执行。')
      LODOP.ADD_PRINT_TEXT(lineTop + 40, 27, 600, 20, '三、验收方法：甲方根据合同所列型号、规格、数量验收乙方所提供的货物。')
      LODOP.ADD_PRINT_TEXT(lineTop + 55, 27, 730, 20, '四、运输方式：乙方通过快递、物流等方式发货，在合同约定的时间内发到需方指定的地点（送货上门）所有运输费用由甲方承担。')
      LODOP.ADD_PRINT_TEXT(lineTop + 70, 27, 600, 20, '五、送货单据：送货时需要带送货单，送货单需要仓库收货人签收，供后续对账需要。')
      LODOP.ADD_PRINT_TEXT(lineTop + 85, 27, 600, 20, '六、保修条款：乙方须保证所供货物的品质，负责不合格品的退换。')
      LODOP.ADD_PRINT_TEXT(lineTop + 100, 27, 730, 20, '七、其他约定事项：乙方因不可抗力因素（如地震、火灾、飞机失事等）造成供货延期，必须提前5天通知甲方，否则给甲方造成的损失由乙方承担所有责任。')
      LODOP.ADD_PRINT_TEXT(lineTop + 130, 27, 730, 20, '八、本合同一式两份，自合同双方盖章签字后生效；传真件同样有效。任何一方不得擅自修改或终止，如需修改或终止时，需经双方协商同意，另立补充协议方可生效。')
      LODOP.ADD_PRINT_TEXT(lineTop + 160, 27, 730, 20, '九、本合同双方各持一份，具有同等法律效力，适用法律为中华人民共和国法律。其他未尽事宜，经双方友好协商解决。若协商不成则由甲方所在地仲裁法院仲裁。')
      LODOP.ADD_PRINT_TEXT(lineTop + 230, 32, 300, 20, '甲方（盖章）：')
      LODOP.ADD_PRINT_TEXT(lineTop + 230, 450, 300, 20, '乙方（盖章）：')

      LODOP.ADD_PRINT_TEXT(lineTop + 280, 32, 300, 20, '公司名称：深圳唯修汇科技有限公司')
      LODOP.ADD_PRINT_TEXT(lineTop + 315, 32, 300, 20, '签名：')
      LODOP.ADD_PRINT_TEXT(lineTop + 345, 32, 300, 20, '日期：')
      LODOP.ADD_PRINT_TEXT(lineTop + 280, 450, 300, 20, '公司名称：')
      LODOP.ADD_PRINT_TEXT(lineTop + 315, 450, 300, 20, '签名：')
      LODOP.ADD_PRINT_TEXT(lineTop + 345, 450, 300, 20, '日期：')
      LODOP.PREVIEW()
    },
    // 表格选择
    handleSelectionChange() {}
  }
}
</script>

<style >
.shipment_label {
  float: left;
  font-family: 'Microsoft Yahei';
  font-size: 16px;
}

.shipment_div {
  float: left;
  font-family: 'Microsoft Yahei';
  font-size: 13px;
  font-weight: 500;
}
.material-filter-container > .el-row,
.shipment_header {
  border: 1px;
  color: #333;
  line-height: 30px;
}

.el-aside {
  color: #333;
  line-height: 18px;
}

.el-main {
  color: #333;
  text-align: center;
  line-height: 30px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-container:nth-child(5) .el-aside {
  line-height: 260px;
}
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}
.el-pagination__total,
.el-pagination__sizes,
.btn-prev,
.el-pager,
.btn-next,
.el-pagination__jump {
  margin-top: 2px !important;
}
.el-pagination {
  line-height: 40px;
  white-space: pre-wrap;
}
.el-table__body tr.current-row > td {
  background-color: #dde9fc;
}
.time_div {
  width: 100px;
  margin-bottom: 20px;
  margin-top: -30px;
}
.mydialog .dialog-table .el-input__inner, .mydialog .dialog-table .el-input {
    width: 200px;
    text-align: center;
}
.list .item {
  padding: 5px;
  font-size: 14px;
}
</style>
